<script setup lang="ts">
import dayjs from 'dayjs'
import { useRequest } from 'vue-request'
import { OrderStatus } from '@/types/enum'
import { useUserInfoStore } from '@/store/userInfo'
import { fetchDriverDetailAPI } from '@/apis/fetchDriverDetail'
import { fetchNoticesAPI } from '@/apis/fetchNotices'
import { useDriverStatusStore } from '@/store/driverStatus'
import { fetchOrdersAPI } from '@/apis/fetchOrders'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const driverStatusStore = useDriverStatusStore()

const { data: driverDetail } = useRequest(
  () => fetchDriverDetailAPI(userInfoStore.userInfo!.token).then((res) => {
    driverStatusStore.isOnline = Boolean(res.data?.data.is_online)
    return res.data?.data
  }),
)
const { data: notice } = useRequest(
  () => fetchNoticesAPI({ page: '1', limit: '1' }, userInfoStore.userInfo!.token).then((res) => {
    if (res.data?.data.data.length)
      return res.data.data.data[0]
  }),
)
const { data: orders, loading, refresh: refreshOrders } = useRequest(
  () => fetchOrdersAPI({
    lat: driverStatusStore.location.lat,
    lng: driverStatusStore.location.lng,
  }, userInfoStore.userInfo!.token).then(res => res.data?.data),
  { manual: true },
)

onLoad(async () => {
  await Promise.all([
    driverStatusStore.updateCity(),
    driverStatusStore.updateLocation(),
  ])
  refreshOrders()
})

function handleSignIn() {
  router.push({
    name: 'signin',
    params: driverDetail
      ? { oldData: JSON.stringify(driverDetail.value) }
      : undefined,
  })
}

function handleUpdateProfile() {
  router.push('profileSettings')
}

function handleViewNotices() {
  router.push('notice')
}
</script>

<template>
  <!-- 背景 -->
  <view class="absolute left-0 top-0 h-310rpx w-screen bg-#3F8BF6" />
  <!-- 内容 -->
  <view class="relative z-10 px-24rpx">
    <Spacer h="65" />
    <!-- 头像、昵称、手机号 -->
    <ProfileHeader
      @update-profile="handleUpdateProfile"
      @sign-in="handleSignIn"
    />
    <Spacer h="65" />
    <!-- 公告栏 -->
    <view class="flex items-center rounded-10rpx bg-white px-24rpx py-18rpx" @tap="handleViewNotices">
      <view class="flex-none text-32rpx text-#3F8BF6 leading-45rpx">
        公告
      </view>
      <view class="mx-24rpx h-44rpx w-1rpx flex-none bg-#3F8BF6 font-semibold" />
      <view class="line-clamp-1 flex-auto text-28rpx text-#333333 font-medium leading-40rpx">
        {{ notice?.title }}
      </view>
      <image
        class="ml-40rpx h-28rpx w-16rpx flex-none"
        src="@/static/images/chevron_right_gray.png"
      />
    </view>
    <Spacer h="40" />
    <!-- 抢单列表 Header -->
    <view class="relative flex items-center justify-between">
      <button v-if="driverStatusStore.city" class="flex items-center rounded-full bg-#F2F2F2 px-16rpx py-12rpx" @tap="driverStatusStore.updateCity()">
        <image
          class="h-40rpx w-40rpx"
          src="@/static/images/location_mark.png"
        />
        <Spacer w="8" />
        <view class="text-28rpx text-#333333 font-medium leading-40rpx">
          {{ driverStatusStore.city }}
        </view>
      </button>
      <button v-else class="flex items-center rounded-full bg-#F2F2F2 px-16rpx py-12rpx" @tap="driverStatusStore.updateCity()">
        <image
          class="h-40rpx w-40rpx animate-spin"
          src="@/static/images/loading_blue.png"
        />
        <Spacer w="8" />
        <view class="text-28rpx text-#333333 font-medium leading-40rpx">
          加载中...
        </view>
      </button>
      <view class="absolute top-4rpx flex flex-col items-center x-center">
        <view class="text-36rpx text-#333333 font-medium leading-50rpx">
          抢单大厅
        </view>
        <Spacer h="4" />
        <image
          class="h-20rpx w-30rpx"
          src="@/static/images/indicator_blue_left.png"
        />
      </view>
      <button
        v-if="driverStatusStore.isOnline && driverStatusStore.location"
        class="flex items-center rounded-full bg-#F2F2F2 px-16rpx py-12rpx"
        @tap="refreshOrders"
      >
        <image
          class="h-40rpx w-40rpx"
          src="@/static/images/refresh.png"
        />
        <Spacer w="8" />
        <view class="text-28rpx text-#333333 font-medium leading-40rpx">
          刷新
        </view>
      </button>
    </view>
    <Spacer h="40" />
    <!-- 抢单列表 -->
    <OrderCard
      v-for="item in orders"
      :key="item.id"
      :order-id="item.id.toString()"
      :order-type="item.type"
      :order-status="OrderStatus.未接单"
      :price="item.money"
      :time="dayjs(item.create_time).format('YYYY-MM-DD HH:mm')"
      :distance="item.distance"
      :from="item.start_place"
      :to="item.end_place"
      :distance-from-start="item.driver_distance.toString()"
    />
  </view>

  <view v-if="!orders?.length" class="absolute left-1/2 top-1/2 text-28rpx text-#999999 -translate-1/2">
    暂无数据
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />

  <!-- <uv-overlay :show="isShowModal" @tap="isShowModal = false">
    <uv-transition mode="zoom-in" :show="isShowModal">
      <view class="relative h-screen w-screen">
        <DispatchModal
          :orders="[
            {
              orderType: OrderType.包车,
              price: '132',
              time: '2024.04.34',
              distance: '15.6',
              from: '地核发货发货发货发货前我都记得千万记得我就去外地的千万记得千万',
              to: '我不',
              distanceFromStart: '10',
            },
            {
              orderType: OrderType.包车,
              price: '132',
              time: '2024.04.34',
              distance: '15.6',
              from: '地核',
              to: '我不',
              distanceFromStart: '10',
            },
            {
              orderType: OrderType.包车,
              price: '132',
              time: '2024.04.34',
              distance: '15.6',
              from: '地核',
              to: '我不',
              distanceFromStart: '10',
            },
          ]"
          @close="isShowModal = false"
        />
      </view>
    </uv-transition>
  </uv-overlay> -->
</template>

<route lang="yaml">
name: 'home'
style:
  navigationBarTitleText: '接单大厅'
</route>
